<template>
  <el-card class="attendance-table-card">
    <el-table :data="paginatedData" border class="attendance-table">
      <el-table-column prop="userId" label="序号" width="140" align="center" />
      <el-table-column prop="username" label="姓名" width="140" align="center" />
      <el-table-column prop="workNumber" label="工号" width="140" align="center" />
      <el-table-column prop="departmentName" label="部门" width="140" align="center" />
      <el-table-column prop="mobile" label="手机" width="140" align="center" />
      <el-table-column v-for="(day,index) in days" :key="day" :label="day" align="center"
        width="140">
        <template v-slot="scope">
          <span :class="{
        absent: scope.row.attendanceRecord[index]?.adtStatu === 2,
        rest: scope.row.attendanceRecord[index]?.adtStatu === 22
      }">
            {{ getStatusText(scope.row.attendanceRecord[index]?.adtStatu) }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="attendance-pagination">
      <!-- total/pagesize 自动计算出页数 -->
      <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize"
        :current-page.sync="curPage" @current-change="handleCurChange" />
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'AttendanceTable',
  props: {
    tableData: Array,
    days: Array,
    total: Number,
    pageSize: Number,
    currentPage: Number, // 父组件传来的
  },
  data() {
    return {
      rowsLength: null,
      curPage: null, // 作为current-page.sync的中间变量
    };
  },
  created() {
    this.curPage = this.currentPage;
  },
  computed: {
    paginatedData() {
      if (!Array.isArray(this.tableData)) return [];
      const start = (this.currentPage - 1) * this.pageSize;
      return this.tableData.slice(start, start + this.pageSize);
    },
  },
  methods: {
    handleCurChange() {
      this.$emit('changeCurPage', this.curPage);
      console.log(this.curPage);
    },
    getStatusText(statusCode) {
      const statusMap = {
        1: '正常',
        2: '旷工',
        3: '迟到',
        4: '早退',
        5: '外出',
        6: '出差',
        7: '年假',
        8: '事假',
        9: '病假',
        10: '婚假',
        11: '丧假',
        12: '产假',
        13: '奖励产假',
        14: '陪产假',
        15: '探亲假',
        16: '工伤假',
        17: '调休',
        18: '产检假',
        19: '流产假',
        20: '长期病假',
        21: '补签',
        22: '休息',
      };
      return statusMap[statusCode] || '-';
    },
  },
};
</script>

<style scoped>
.attendance-table-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.attendance-table {
  width: 100%;
}
.attendance-pagination {
  margin-top: 16px;
  text-align: center;
}
.absent {
  color: #f56c6c;
}
.rest {
  color: #909399;
}
</style> 